<template>
  <view class="template-login">
    <!-- 顶部自定义导航 -->
    <!-- <tn-nav-bar fixed alpha customBack>
      <view slot="back" class='tn-custom-nav-bar__back'
        @click="goBack">
        <text class='icon tn-icon-left'></text>
        <text class='icon tn-icon-home-capsule-fill'></text>
      </view>
    </tn-nav-bar> -->
    
    <view class="login">
      <!-- 顶部背景图片-->
      <view class="login__bg login__bg--top">
        <image class="bg" src="/static/login_top2.jpg" mode="widthFix"></image>
      </view>
      <view class="login__bg login__bg--top">
        <image class="rocket rocket-sussuspension" src="/static/login_top3.png" mode="widthFix"></image>
      </view>
      
      <view class="login__wrapper">
        
        <!-- 输入框内容-->
        <view class="login__info tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
          <!-- 登录 -->
          <block v-if="currentModeIndex === 0">
            <view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
              <view class="login__info__item__input__left-icon">
                <view class="tn-icon-my"></view>
              </view>
              <view class="login__info__item__input__content">
                <input maxlength="45" placeholder-class="input-placeholder" @input="userInput" placeholder="请输入登录用户名称" />
              </view>
            </view>
            
            <view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
              <view class="login__info__item__input__left-icon">
                <view class="tn-icon-lock"></view>
              </view>
              <view class="login__info__item__input__content">
                <input :password="!showPassword" placeholder-class="input-placeholder" @input="passInput" placeholder="请输入登录密码" />
              </view>
              <view class="login__info__item__input__right-icon" @click="showPassword = !showPassword">
                <view :class="[showPassword ? 'tn-icon-eye' : 'tn-icon-eye-hide']"></view>
              </view>
            </view>
			<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
			  <view class="login__info__item__input__left-icon">
			    <view class="tn-icon-my"></view>
			  </view>
			  <view class="login__info__item__input__content">
			    <input maxlength="45" placeholder-class="input-placeholder" @input="codeInput" placeholder="请输入验证码" />
			  </view>
			  <view class="login__info__item__input__right-icon u-border" style="width: 30%;" @click="getVierificationCode">
			    <img v-show="codeImgSrc != ''" :src="codeImgSrc" />
			  </view>
			</view>
          </block>
          <!-- 注册 -->
          <view class="login__info__item__button tn-cool-bg-color-7--reverse" @click="currentModeIndex === 0 ? login() : registra()" hover-class="tn-hover" :hover-stay-time="150">{{ currentModeIndex === 0 ? '登录' : '注册'}}</view>
          
          <!-- <view v-if="currentModeIndex === 0" class="login__info__item__tips">忘记密码?</view> -->
        </view>
      </view>
      
      <tn-tips ref="tips" position="top"></tn-tips>
      <!-- 底部背景图片-->
      <view class="login__bg login__bg--bottom">
        <image src="/static/login_bottom_bg.jpg" mode="widthFix"></image>
      </view>
    </view>
  </view>
</template>

<script>
  var app = getApp();
  export default {
    name: 'login-demo-1',
    // mixins: [template_page_mixin],
    data() {
      return {
        // 当前选中的模式
        currentModeIndex: 0,
        // 模式选中滑块
        modeSliderStyle: {
          left: 0
        },
        // 是否显示密码
        showPassword: false,
        // 倒计时提示文字
        tips: '获取验证码',
		email: '',
		codeImgSrc: '',
		pass: '',
		code: '',
		user: '',
		isDetail: false
      }
    },
    watch: {
      currentModeIndex(value) {
        const sliderWidth = uni.upx2px(476 / 2)
        this.modeSliderStyle.left = `${sliderWidth * value}px`
      }
    },
	onLoad(options) {
		this.getVierificationCode()
		if (options.id) {
			this.isDetail = true
		}
	},
    methods: { 
		///获取验证码
		getVierificationCode() {
			this.$u.get('/api/User/getVierificationCode', {}).then(res=>{
				if (res.img != null) {
					this.codeImgSrc = "data:image/png;base64," + res.img;
					this.email = res.uuid;
				} else {
					this.$refs.uToast.show({
						title: '获取验证码失败请重新获取', 
						type: 'error',  
					})
				}
			})
			// uni.request({
			// 	url:"http://192.168.0.101:8098/api/User/getVierificationCode",
			// 	success: (res) => {
					
			// 	}
			// })
		},
		login() {
			if (this.pass == '') {
				this.$t.message.toast('请输入密码')
				return;
			} else if (this.user == '') {
				this.$t.message.toast('请输入用户名')
				return;
			} else if (this.pass.length < 6) {
				this.$t.message.toast('密码应大于6位')
				return;
			} else {
				this.$t.message.loading('正在登录')
				let userInfo = this.userInfo;
				let userifno = {
					UUID: this.email,
					passWord: this.pass,
					userName: this.user,
					verificationCode: this.code
				}
				this.$u.post('/api/User/login', {
					UUID: this.email,
					passWord: this.pass,
					userName: this.user,
					verificationCode: this.code
				}).then(res => {
					// this.$u.toast(res.message);
					this.$t.message.toast(res.message)
					this.$t.message.closeLoading()
					uni.setStorage({
						key: 'jo_id_token',
						data: res.data.token,
					});
					uni.setStorage({
						key: 'jo_user',
						data: res.data,
					});
					uni.setStorage({
						key: 'jo_userImg',
						data: res.data.img,
					});
					setTimeout(()=>{
						this.$u.route({
							type:'reLaunch',
							url:'pages/index/index'
						})
						// this.$Router.replace({name:"tabbar"})
					},1300)
				});
				
			}
		},
		codeInput: function(e) {
			this.code = e.detail.value;
		},
		passInput: function(e) {
			this.pass = e.detail.value;
		},
		userInput: function(e) {
			this.user = e.detail.value;
		},
    }
  }
</script>

<style lang="scss" scoped>
  // @import '@/static/css/templatePage/custom_nav_bar.scss';
  /* 悬浮 */
  .rocket-sussuspension{
    animation: suspension 3s ease-in-out infinite;
  }
  
  @keyframes suspension {
    0%, 100% {
      transform: translate(0 , 0);
    }
    50% {
      transform: translate(-0.8rem , 1rem);
    }
  }
  
  .login {
    position: relative;
    height: 100%;
    z-index: 1;
    
    /* 背景图片 start */
    &__bg {
      z-index: -1;
      position: fixed;
      
      &--top {
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        
        .bg {
          width: 750rpx;
          will-change: transform;
        }
        .rocket {
          margin: 50rpx 28%;
          width: 400rpx;
          will-change: transform;
        }
      }
      
      &--bottom {
        bottom: -10rpx;
        left: 0;
        right: 0;
        width: 100%;
        // height: 144px;
        margin-bottom: env(safe-area-inset-bottom);
        
        image {
          width: 750rpx;
          will-change: transform;
        }
      }
    }
    /* 背景图片 end */
    
    /* 内容 start */
    &__wrapper {
      margin-top: 250rpx;
      width: 100%;
    }
    
    /* 切换 start */
    &__mode {
      position: relative;
      margin: 0 auto;
      width: 476rpx;
      height: 77rpx;
      background-color: #FFFFFF;
      box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);
      border-radius: 39rpx;
      
      &__item {
        height: 77rpx;
        width: 100%;
        line-height: 77rpx;
        text-align: center;
        font-size: 31rpx;
        color: #908f8f;
        letter-spacing: 1em;
        text-indent: 1em;
        z-index: 2;
        transition: all 0.4s;
        
        &--active {
          font-weight: bold;
          color: #FFFFFF;
        }
      }
      
      &__slider {
        position: absolute;
        height: inherit;
        width: calc(476rpx);
        border-radius: inherit;
        box-shadow: 0rpx 18rpx 72rpx 18rpx rgba(0, 195, 255, 0.1);
        z-index: 1;
        transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
      }
    }
    /* 切换 end */
    
    /* 登录注册信息 start */
    &__info {
      margin: 0 30rpx;
      margin-top: 105rpx;
      padding: 30rpx 51rpx;
      padding-bottom: 0;
      border-radius: 20rpx;
      background-color: #ffff;
      box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);
      
      &__item {
        
        &__input {
          margin-top: 59rpx;
          width: 100%;
          height: 77rpx;
          border: 1rpx solid #E6E6E6;
          border-radius: 39rpx;
          
          &__left-icon {
            width: 10%;
            font-size: 44rpx;
            margin-left: 20rpx;
            color: #AAAAAA;
          }
          
          &__content {
            width: 80%;
            padding-left: 10rpx;
            
            &--verify-code {
              width: 56%;
            }
            
            input {
              font-size: 24rpx;
              // letter-spacing: 0.1em;
            }
          }
          
          &__right-icon {
            width: 10%;
            font-size: 44rpx;
            margin-right: 20rpx;
            color: #AAAAAA;
          }
          
          &__right-verify-code {
            width: 34%;
            margin-right: 20rpx;
          }
        }
        
        &__button {
          margin-top: 75rpx;
          margin-bottom: 39rpx;
          width: 100%;
          height: 77rpx;
          text-align: center;
          font-size: 31rpx;
          font-weight: bold;
          line-height: 77rpx;
          letter-spacing: 1em;
          text-indent: 1em;
          border-radius: 39rpx;
          box-shadow: 1rpx 10rpx 24rpx 0rpx rgba(60, 129, 254, 0.35);
        }
        
        &__tips {
          margin: 30rpx 0;
          color: #AAAAAA;
        }
      }
    }
    /* 登录注册信息 end */
    
    /* 登录方式切换 start */
    &__way {
      margin: 0 auto;
      margin-top: 110rpx;
      
      &__item {
        &--icon {
          width: 77rpx;
          height: 77rpx;
          font-size: 50rpx;
          border-radius: 100rpx;
          margin-bottom: 18rpx;
          position: relative;
          z-index: 1;
          
          &::after {
            content: " ";
            position: absolute;
            z-index: -1;
            width: 100%;
            height: 100%;
            left: 0;
            bottom: 0;
            border-radius: inherit;
            opacity: 1;
            transform: scale(1, 1);
            background-size: 100% 100%;
            background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg5.png);
          }
        }
      }
    }
    /* 登录方式切换 end */
    /* 内容 end */
    
  }
  
  /deep/.input-placeholder {
    font-size: 24rpx;
    color: #E6E6E6;
  }
  
</style>
